<template>
	<view class="overlay_card">
		<view class="info_card">
			<view class="title">
				{{detailsData.name}}
			</view>
			<view class="price_box">
				<view class="price">
					<text>¥</text>
					{{detailsData.price}}
					<text>/月</text>
				</view>
				<!-- <text class="dele">¥3680</text> -->
			</view>
			<view class="icon_list_box">
				<bolok v-for="(item,index) in roomTagsList" :key="index">
				<view class="list" v-if="index<4">
					<view class="list_icon">
						<image :src="item.icon" mode="" class="" v-if="item.icon"></image>
						<!-- <image :src="item.icon||'/pagesA/static/details/ditie.svg'" mode="" class=""></image> -->
					</view>
					<text class="tap_title">{{item.valueName}}</text>
				</view>
				</bolok>
			</view>
			<view class="info_des_box">
				<view class="info_des" v-for="(item,index) in list" :key="index">
					<text class="info_title">{{item.title}}</text>
					<text class="info_value">{{detailsData[item.code]||'-'}} </text>
				</view>
			</view>
			<view class="address_time_list">
				<image src="/pagesA/static/details/time.svg" mode="" class="address_icon"></image>
				<text>起租期：{{detailsData.availableStartTime}}</text>
			</view>
			<view class="address_time_list">
				<image src="/pagesA/static/details/dizhi.svg" mode="" class="address_icon"></image>
				<text>{{detailsData.address}}</text>
			</view>
			<!-- 	<view class="address_des">
				号线侨香站步行约800米
			</view> -->
			<view class="tob_title">
				<text>物业费{{detailsData.managementFee}}元/月</text>
				<text class="magin_left">电费{{detailsData.electricFee}}元/度</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const porps = defineProps({
		detailsData: {
			type: Object,
			default: () => {}
		},
		roomTagsList: {
			type: Array,
			default: () => []
		},
		// list:{type:Array,default:()=>[]},
	})
	const list = ref([{
			code: 'area',
			title: '建筑面积',
			value: ''
		},
		{
			code: 'roomTypeName',
			title: '户型',
			value: ''
		},
		{
			code: 'floorNum',
			title: '楼层',
			value: ''
		},
		{
			code: 'facingName',
			title: '朝向',
			value: ''
		}
	])
</script>

<style lang="less" scoped>
	.overlay_card {
		position: relative;
		margin: -30rpx 0px 0;
		/* 使用负边距实现交叠效果 */
		background-color: #fff;
		// border-radius: 15px;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
		// box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		// padding: 15px;
		z-index: 20;
		overflow: hidden;

		.info_card {
			padding: 30rpx;
			background: #ffffff;

			.title {
				font-family: PingFangSC-Semibold;
				font-size: 32rpx;
				color: #000000;
				line-height: 36rpx;
				font-weight: 600;
			}

			.price_box {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.price {
					font-family: Arial-BoldMT;
					font-size: 42rpx;
					color: #EE7930;
					text-align: right;
					line-height: 36rpx;
					font-weight: 700;

					text {
						font-family: PingFangSC-Regular;
						font-size: 28rpx;
						color: #EE7930;
						text-align: right;
						line-height: 36rpx;
						font-weight: 400;
					}
				}

				.dele {
					font-family: ArialMT;
					font-size: 28rpx;
					color: #999999;
					letter-spacing: 0;
					line-height: 24rpx;
					font-weight: 400;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}

			.icon_list_box {
				display: flex;
				margin-top: 24rpx;
				flex-wrap: wrap;

				.list {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #333333;
					letter-spacing: 0;
					text-align: center;
					line-height: 24rpx;
					font-weight: 400;
					margin-right: 80rpx;


					.list_icon {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 16rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.tap_title {
						// width: 100rpx;
						text-align: center;
					}
				}
			}

			.info_des_box {
				background: #F7FAFD;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx;
				margin-top: 16rpx;

				.info_des {
					display: flex;
					flex-direction: column;
					align-items: center;

					// justify-content: center;
					.info_title {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						letter-spacing: 0;
						line-height: 30rpx;
						font-weight: 400;

					}

					.info_value {
						margin-top: 16rpx;
						font-family: PingFangSC-Semibold;
						font-size: 30rpx;
						color: #000000;
						letter-spacing: 0;
						line-height: 30rpx;
						font-weight: 600;
					}
				}
			}

			.address_time_list {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				font-family: PingFangSC-Regular;
				font-size: 28rpx;
				color: #000000;
				line-height: 30rpx;
				font-weight: 400;

				.address_icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 16rpx;
				}
			}

			.address_des {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #666666;
				line-height: 30rpx;
				font-weight: 400;
				margin-top: 24rpx;
			}

			.tob_title {
				margin-top: 24rpx;
				background: #FFF5EF;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #FF6200;
				padding: 16rpx;

				.magin_left {
					margin-left: 40rpx;
				}
			}
		}
	}
</style>